<script setup lang="ts">
import BatchKeywordPackage from "~/contentScripts/views/wxt/components/BatchKeywordPackage.vue";
import {WxtBizCode} from "~/contentScripts/views/wxt/lib/wxtUtils";

const props = defineProps({
  value: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
  products: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
  plans: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: WxtBizCode.关键字推广,
  },
  // data: {
  //   type: Array as PropType<any[]>,
  //   default: () => []
  // }
});
const data = reactive({
  // 出价比例
  bidPriceRatio: 100,
  // 出价
  bidPrice: undefined,
  bidType: 'suggestedBid',
  // 出价上限
  bidPriceLimit: undefined,
  // 精准开关
  preciseSwitch: false,
});
const bidTypeOptions = [
  {
    title: '建议出价',
    value: 'suggestedBid',
  },
  {
    title: '市场平均出价',
    value: 'marketAverageBid',
  },
  {
    title: '自定义出价',
    value: 'customBid',
  },
];
watch(()=>data.bidType, (val)=>{
  if(val === 'customBid'){
    data.bidPriceLimit = undefined;
  }
})
const emit = defineEmits([
  "update:value",
]);
emit('update:value', data);
// 监听data变化 更新value
watch(()=>data, (val)=>{
  emit('update:value', val);
}, {
  deep: true,
});
</script>

<template>
  <div class="box" style="overflow: hidden;">
    <div class="title">
      <a-row>
        <a-col flex="1">

          <span class="bold">关键词设置</span>
          <!--          <a-tooltip title="批量添加自定义关键词，按设定条件分配到已选择的单元，未设置手动添加的商品会自动添加">-->
          <!--            <InfoCircleOutlined/>-->
          <!--          </a-tooltip>-->
          &nbsp;&nbsp;&nbsp;&nbsp;
<!--          <span class="gray">手动添加词包: </span>-->
<!--          <a-switch v-model:checked="data.switchValue" size="small"/>-->
        </a-col>
      </a-row>
    </div>
    <div class="content" style="height: 303px;">

      <!--      出价方式-->
      <a-row style="padding: 10px;" type="flex">
        <a-col style="width: 70px;">
          出价方式：
        </a-col>
        <a-col flex="1">
          <a-radio-group v-model:value="data.bidType" size="small">
            <a-radio-button v-for="item in bidTypeOptions" :key="item.value" :value="item.value">
              {{ item.title }}
            </a-radio-button>
          </a-radio-group>
        </a-col>
      </a-row>
      <!--      出价价格-->
      <a-row style="padding: 10px;" type="flex">
        <a-col flex="1">
          <a-row type="flex">
            <a-col style="width: 70px;">
              出价价格：
            </a-col>
            <a-col flex="1">
              <a-input-number v-if="data.bidType!=='customBid'" placeholder="请输入" v-model:value="data.bidPriceRatio" size="small" :min="0.01" :max="100" :step="0.01"  style="width: 100px;">
                <template #addonAfter>
                  %
                </template>
              </a-input-number>
              <a-input-number v-else placeholder="请输入" v-model:value="data.bidPrice" size="small" :min="0.01" :step="0.01" style="width: 100px;">
                <template #addonAfter>
                  元
                </template>
              </a-input-number>
            </a-col>
          </a-row>
        </a-col>
        <a-col flex="1" v-if="data.bidType!=='customBid'">
          <a-row type="flex">
            <a-col style="width: 70px;">
              出价上限：
            </a-col>
            <a-col flex="1">
              <a-input-number v-model:value="data.bidPriceLimit" placeholder="请输入" size="small" :min="0.01" :step="0.01"  style="width: 100px;">
                <template #addonAfter>
                  元
                </template>
              </a-input-number>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <!--      匹配模式：-->
      <a-row style="padding: 10px;" type="flex">
        <a-col style="width: 70px;">
          匹配模式：
        </a-col>
        <a-col flex="1">
          <a-switch v-model:checked="data.preciseSwitch" checked-children="精准" un-checked-children="广泛" />
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<style scoped>
.box {
  border: #eee solid 1px;
  border-radius: 10px;
  overflow: hidden;

  > .title {
    background-color: #ebeef5;
    padding: 10px;
    line-height: 28px;

    .bold {
      font-weight: bold;
      color: #444;
    }

    .gray {
      color: #555;
    }
  }
}
</style>
